<template>
  <div class="item">
    <div class="pic">
      <img :src="item.cover">
      <div class="bottom">
        <div class="play-num">
          <span class="iconfont nicebofang1"></span>
          <span>{{tranNumber(item.playCount)}}</span>
        </div>
        <!-- <div class="time">
          <span class="iconfont niceicon-"></span>
          <span>{{item.artistName}}</span>
        </div> -->
      </div>
    </div>
    <div class="text">
      <span class="iconfont nicemv24"></span>
      <p>{{item.name}}</p>
    </div>
    <div class="comment">
      <!-- <div class="attr flex-center">
        <i class="iconfont zan nicelike"></i>
        <span>1629</span>
      </div>
      <div class="attr flex-center">
        <i class="iconfont nicemessage"></i>
        <span>72</span>
      </div> -->
      <span class="name">
        <i class="iconfont niceicon-"></i>
        <div class="author-list">
          <b v-for="author of item.artists" :key="author.name">{{author.name}}</b>
        </div>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
   item: {
     type: Object
   }
  },
  computed: {
    tranNumber () {
      return (num) => {
        return this.utils.tranNumber(num, 0)
      }
    }
  },
  methods: {
    // 播放数量转换
    // tranNumber (num, point) {
    //   let numStr = num.toString()
    //   // 十万以内直接返回
    //   if (numStr.length < 6) {
    //     return numStr
    //   } else if (numStr.length > 8) {
    //     // 大于8位数是亿
    //     let decimal = numStr.substring(numStr.length - 8, numStr.length - 8 + point)
    //     return parseFloat(parseInt(num / 100000000) + '.' + decimal) + '亿'
    //   } else if (numStr.length > 5) {
    //     // 大于6位数是十万 (以10W分割 10W以下全部显示)
    //     let decimal = numStr.substring(numStr.length - 4, numStr.length - 4 + point)
    //     return parseFloat(parseInt(num / 10000) + '.' + decimal) + '万'
    //   }
    // },
    async getMvData (id) {
      try {
        let res = await this.$api.getMvData(id)
        if (res.code === 200) {
          console.log(res.data)
        }
      } catch (error) {
        console.log(error)
      }
    }
  },
  created () {
  }
}
</script>

<style lang="stylus" scoped>
  .item {
    width: 100%;
    padding: 0 0.3rem;
    border-bottom: 0.1rem solid rgba(218, 197, 201, 0.05);
    margin-bottom: 0.3rem;
    padding-bottom: 0.3rem;
    .pic {
      width: 100%;
      border-radius: 0.15rem 0.15rem 0 0;
      position: relative;
      &:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 3;
        background: rgba(0, 0, 0, 0.35);
        border-radius: 0.15rem 0.15rem 0 0;
      }
      img {
        border-radius: 0.15rem 0.15rem 0 0;
        width: 100%;
      }
      .bottom {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 0.15rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 9;
        div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
            color: rgba(255, 255, 255, 1);
            font-size: 0.24rem;
            &.iconfont {
              font-size: 0.24rem;
              margin-right: 0.15rem;
            }
          }
        }
      }
    }
    .text {
      width: 100%;
      // height: 0.95rem;
      background: rgba(255, 255, 255, 0.25);
      border-radius: 0 0 0.15rem 0.15rem;
      // filter: opacity(30%);
      padding: 0.2rem 0.1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 0.25rem;
      p {
        color: rgba(255, 255, 255, 0.8);
        // line-height: 0.95rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        overflow: hidden;
        width: 90%;
      }
      span {
        color: #ff5b73;
        font-size: 0.5rem;
      }
    }
    .comment {
      display: flex;
      align-items: center;
      .attr {
        margin-right: 0.6rem;
        i {
          color: rgba(255, 255, 255, 0.8);
          font-size: 0.3rem;
          margin-right: 0.1rem;
        }
        span {
          font-size: 0.24rem;
          margin-top: 0.07rem;
          color: rgba(255, 255, 255, 0.8);
        }
      }
      .name {
        color: #ff5b73;
        font-size: 0.24rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex: 1;
        width: 100%;
        i {
          margin-right: 0.1rem;
          color: #ff5b73;
        }
        b {
          &:after {
            content: '/'
            margin: 0 0.1rem;
          }
          &:last-child:after {
            content: ''
          }
        }
      }
    }
  }
</style>
